CSS @when: ಆಧುನಿಕ ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲಿಂಗ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ

ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಸದಾ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವ ಕ್ಷೇತ್ರದಲ್ಲಿ, ಡೈನಾಮಿಕ್ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಯೂಸರ್ ಇಂಟರ್‌ಫೇಸ್‌ಗಳನ್ನು ರಚಿಸುವ ಸಾಮರ್ಥ್ಯವು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ದೃಶ್ಯ ಪ್ರಸ್ತುತಿಯ ಮೂಲಾಧಾರವಾದ CSS, ಹೆಚ್ಚು ಬುದ್ಧಿವಂತ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅಧಿಕಾರ ನೀಡುವ ಪ್ರಬಲ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪರಿಚಯಿಸುವುದನ್ನು ಮುಂದುವರೆಸಿದೆ. ಅಂತಹ ಒಂದು ಅದ್ಭುತ ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ @when at-rule, ಇದು ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲಿಂಗ್‌ಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ನಿರ್ದಿಷ್ಟ ಷರತ್ತುಗಳು ಪೂರೈಸಿದಾಗ ಮಾತ್ರ CSS ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ನಿಜವಾದ ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಸಂದರ್ಭ-ಅರಿವಿನ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಸಾಧ್ಯತೆಗಳ ಜಗತ್ತನ್ನು ತೆರೆಯುತ್ತದೆ.

CSS @when ಎಂದರೇನು?

@when at-rule ಎಂಬುದು CSS ಸ್ಪೆಸಿಫಿಕೇಶನ್‌ಗೆ ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸೇರ್ಪಡೆಯಾಗಿದ್ದು, ಇದು @media ಅಥವಾ @supports ನಿಯಮಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಒಂದು ಷರತ್ತುಬದ್ಧ ಬ್ಲಾಕ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅಂದರೆ ಅದರ ವ್ಯಾಪ್ತಿಯಲ್ಲಿರುವ CSS ಡಿಕ್ಲರೇಶನ್‌ಗಳು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಷರತ್ತು ಸರಿ (true) ಎಂದು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿದರೆ ಮಾತ್ರ ಅನ್ವಯವಾಗುತ್ತವೆ. ಮೂಲಭೂತವಾಗಿ, ಇದು @media ಪ್ರಶ್ನೆಗಳ ಸಾಂಪ್ರದಾಯಿಕ ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಕಂಡೀಷನಿಂಗ್ ಅನ್ನು ಮೀರಿ, ಕೆಲವು ಸ್ಟೈಲ್‌ಗಳು ಯಾವಾಗ ಸಕ್ರಿಯವಾಗಿರಬೇಕು ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ಮತ್ತು ಅಭಿವ್ಯಕ್ತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಇದನ್ನು ನಿಮ್ಮ CSS ಗಾಗಿ ಹೆಚ್ಚು ಪರಿಷ್ಕರಿಸಿದ `if` ಸ್ಟೇಟ್‌ಮೆಂಟ್ ಎಂದು ಭಾವಿಸಿ. ಒಂದು ವಿಶಾಲವಾದ ಷರತ್ತಿನ ಆಧಾರದ ಮೇಲೆ ಸಂಪೂರ್ಣ ಶೈಲಿಗಳ ಗುಂಪನ್ನು ಅನ್ವಯಿಸುವ ಬದಲು, @when ಒಂದು ನಿಯಮದೊಳಗೆ ನಿರ್ದಿಷ್ಟ ಡಿಕ್ಲರೇಶನ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಹೆಚ್ಚು ಸಮರ್ಥ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲಂತೆ ಮಾಡುತ್ತದೆ.

ಸಮನ್ವಯ: @media ಮತ್ತು @supports ಜೊತೆಗೆ @when

@when ನ ನಿಜವಾದ ಶಕ್ತಿಯು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಷರತ್ತುಬದ್ಧ at-rules ಗಳ ಸಂಯೋಜನೆಯಲ್ಲಿ ಬಳಸಿದಾಗ ಅರಿವಾಗುತ್ತದೆ:

1. @media ಪ್ರಶ್ನೆಗಳೊಂದಿಗೆ @when

ಇದು @when ಗಾಗಿ ಬಹುಶಃ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಬಳಕೆಯಾಗಿದೆ. ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ, ನೀವು ಸಂಪೂರ್ಣ CSS ನಿಯಮಗಳನ್ನು @media ಪ್ರಶ್ನೆಯೊಳಗೆ ಸೇರಿಸಬಹುದು. @when ನೊಂದಿಗೆ, ನೀವು ಈಗ ಮೀಡಿಯಾ ಪ್ರಶ್ನೆ ಷರತ್ತುಗಳ ಆಧಾರದ ಮೇಲೆ ಒಂದು ನಿಯಮದೊಳಗೆ ನಿರ್ದಿಷ್ಟ ಡಿಕ್ಲರೇಶನ್‌ಗಳನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಅನ್ವಯಿಸಬಹುದು.

ಉದಾಹರಣೆ: ರೆಸ್ಪಾನ್ಸಿವ್ ಟೈಪೋಗ್ರಫಿ

ಒಂದು ಪ್ಯಾರಾಗ್ರಾಫ್‌ನ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಸರಿಹೊಂದಿಸಲು ನೀವು ಬಯಸುತ್ತೀರಿ ಎಂದುಕೊಳ್ಳೋಣ, ಆದರೆ ವ್ಯೂಪೋರ್ಟ್ 768 ಪಿಕ್ಸೆಲ್‌ಗಳಿಗಿಂತ ಅಗಲವಾಗಿದ್ದಾಗ ಮಾತ್ರ. @when ಇಲ್ಲದೆ, ನೀವು ಇದನ್ನು ಹೀಗೆ ಮಾಡಬಹುದು:

            .my-paragraph {
  font-size: 16px;
}

@media (min-width: 768px) {
  .my-paragraph {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

ಈಗ, @when ಬಳಸಿ, ನೀವು ಅದೇ ಫಲಿತಾಂಶವನ್ನು ಹೆಚ್ಚು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಮತ್ತು ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಸಾಧಿಸಬಹುದು:

            .my-paragraph {
  font-size: 16px;
  @when (min-width: 768px) {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• 16px ನ ಮೂಲ font-size ಯಾವಾಗಲೂ ಅನ್ವಯಿಸುತ್ತದೆ.
• 18px ನ font-size ವ್ಯೂಪೋರ್ಟ್ ಅಗಲವು 768 ಪಿಕ್ಸೆಲ್‌ಗಳು ಅಥವಾ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಿದ್ದಾಗ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ.

ಈ ವಿಧಾನವು ಸಂಪೂರ್ಣ ನಿಯಮಗಳ ಗುಂಪುಗಳನ್ನು ನಕಲು ಮಾಡದೆ, ಪರದೆಯ ಗಾತ್ರ, ಓರಿಯಂಟೇಶನ್, ಅಥವಾ ಇತರ ಮೀಡಿಯಾ ವೈಶಿಷ್ಟ್ಯಗಳ ಆಧಾರದ ಮೇಲೆ ನಿರ್ದಿಷ್ಟ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಸೂಕ್ಷ್ಮ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಮಾಡಲು ನಂಬಲಾಗದಷ್ಟು ಉಪಯುಕ್ತವಾಗಿದೆ.

ಜಾಗತಿಕ ಉದಾಹರಣೆ: ವಿವಿಧ ಸಾಧನಗಳಿಗಾಗಿ UI ಅಂಶಗಳನ್ನು ಅಳವಡಿಸುವುದು

ಜಾಗತಿಕ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಒಂದು ಪ್ರಾಡಕ್ಟ್ ಕಾರ್ಡ್ ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಕಾಂಪ್ಯಾಕ್ಟ್ ವೀಕ್ಷಣೆಯನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು ಆದರೆ ದೊಡ್ಡ ಪರದೆಗಳಲ್ಲಿ ಹೆಚ್ಚು ವಿವರವಾದ ವೀಕ್ಷಣೆಯನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು. @when ಅನ್ನು @media ಜೊತೆಗೆ ಬಳಸಿಕೊಂಡು, ನೀವು ಈ ಪರಿವರ್ತನೆಗಳನ್ನು ಸುಂದರವಾಗಿ ನಿರ್ವಹಿಸಬಹುದು:

            .product-card {
  padding: 10px;
  text-align: center;
  @when (min-width: 600px) {
    padding: 20px;
    text-align: left;
  }
  @when (min-width: 1024px) {
    padding: 30px;
    display: flex;
    align-items: center;
  }
}

.product-image {
  width: 100%;
  height: 150px;
  @when (min-width: 600px) {
    width: 200px;
    height: 200px;
  }
  @when (min-width: 1024px) {
    width: 250px;
    height: 250px;
    margin-right: 20px;
  }
}

            

              
                Copy
              
            
          

ಇದು .product-card ಮತ್ತು ಅದರ ಆಂತರಿಕ ಅಂಶಗಳಾದ .product-image ಗಳು ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರ ಹೆಚ್ಚಾದಂತೆ ತಮ್ಮ ಶೈಲಿಗಳನ್ನು ಪ್ರಗತಿಶೀಲವಾಗಿ ಅಳವಡಿಸಿಕೊಳ್ಳಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಜಾಗತಿಕವಾಗಿ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧನಗಳಲ್ಲಿ ಸೂಕ್ತ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ.

2. @supports ಪ್ರಶ್ನೆಗಳೊಂದಿಗೆ @when

@supports at-rule ಬ್ರೌಸರ್ ನಿರ್ದಿಷ್ಟ CSS ಪ್ರಾಪರ್ಟಿ-ವ್ಯಾಲ್ಯೂ ಜೋಡಿಯನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದನ್ನು @when ಜೊತೆ ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನಿರ್ದಿಷ್ಟ ಬ್ರೌಸರ್ ವೈಶಿಷ್ಟ್ಯ ಲಭ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ನೀವು ಶೈಲಿಗಳನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಅನ್ವಯಿಸಬಹುದು.

ಉದಾಹರಣೆ: ಹೊಸ CSS ವೈಶಿಷ್ಟ್ಯವನ್ನು ಬಳಸುವುದು

ನೀವು ಪ್ರಾಯೋಗಿಕ backdrop-filter ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳು ಅಥವಾ ಹಳೆಯ ಆವೃತ್ತಿಗಳು ಇದನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. @supports ಜೊತೆಗೆ @when ಬಳಸಿ ನೀವು ಅದನ್ನು ಸುಲಭವಾಗಿ ಅನ್ವಯಿಸಬಹುದು:

            .modal-background {
  background-color: rgba(0, 0, 0, 0.5);
  @when supports (backdrop-filter: blur(10px)) {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

ಈ ಸಂದರ್ಭದಲ್ಲಿ:

• background-color ಯಾವಾಗಲೂ ಫಾಲ್‌ಬ್ಯಾಕ್ ಆಗಿ ಅನ್ವಯವಾಗುತ್ತದೆ.
• ಬ್ರೌಸರ್ backdrop-filter: blur(10px) ಡಿಕ್ಲರೇಶನ್ ಅನ್ನು ಬೆಂಬಲಿಸಿದಾಗ ಮಾತ್ರ backdrop-filter ಅನ್ವಯವಾಗುತ್ತದೆ.

ಇದು ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆಗೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ, ಇತ್ತೀಚಿನ CSS ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸದ ಪರಿಸರದಲ್ಲಿಯೂ ನಿಮ್ಮ ವಿನ್ಯಾಸವು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿರುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಜಾಗತಿಕ ಉದಾಹರಣೆ: ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆ

ಸೂಕ್ಷ್ಮ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಕೆಲವು ಸುಧಾರಿತ ಅನಿಮೇಷನ್‌ಗಳು animation-composition ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಈಸಿಂಗ್ ಫಂಕ್ಷನ್‌ಗಳಂತಹ ಹೊಸ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅವಲಂಬಿಸಿರಬಹುದು. ಈ ಸುಧಾರಿತ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಅಥವಾ ಸರಳವಾದ ಅನಿಮೇಷನ್ ಒದಗಿಸಲು ನೀವು @when ಮತ್ತು @supports ಅನ್ನು ಬಳಸಬಹುದು.

            .animated-element {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;

  @when supports (animation-composition: replace) {
    /* More advanced animation properties or sequences */
    animation: slideIn 1s forwards;
    animation-composition: replace;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, animation-composition: replace ಅನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳು ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕ ಅನಿಮೇಷನ್ ಅನುಕ್ರಮವನ್ನು ಪಡೆಯುತ್ತವೆ, ಆದರೆ ಇತರರು ಸರಳವಾದ transition ಪ್ರಾಪರ್ಟಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಆಗುತ್ತವೆ, ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಸ್ಥಿರವಾದ, ಆದರೂ ವಿಭಿನ್ನವಾದ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸುತ್ತವೆ.

3. ಬಹು ಷರತ್ತುಗಳೊಂದಿಗೆ @when ಸಂಯೋಜಿಸುವುದು

ನೀವು ಒಂದೇ @when ನಿಯಮದೊಳಗೆ ಅನೇಕ ಷರತ್ತುಗಳನ್ನು ಕೂಡ ಸಂಯೋಜಿಸಬಹುದು, ಇನ್ನೂ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಸ್ಟೈಲಿಂಗ್ ತರ್ಕವನ್ನು ರಚಿಸಬಹುದು. ಇದನ್ನು and, or, ಮತ್ತು not ನಂತಹ ತಾರ್ಕಿಕ ಆಪರೇಟರ್‌ಗಳನ್ನು ಬಳಸಿ ಮಾಡಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ: ಸಂಕೀರ್ಣ ರೆಸ್ಪಾನ್ಸಿವ್ ತರ್ಕ

ಒಂದು ಸೈಡ್‌ಬಾರ್ ಅನ್ನು ಚಿಕ್ಕ ಪರದೆಗಳಲ್ಲಿ ಮಾತ್ರ ಮರೆಮಾಡಬೇಕು, ಆದರೆ ನಿರ್ದಿಷ್ಟ ಬಳಕೆದಾರರ ಆದ್ಯತೆಯ ಸೆಟ್ಟಿಂಗ್ (ದೇಹದ ಮೇಲೆ ಒಂದು ಕ್ಲಾಸ್‌ನಿಂದ ಸೂಚಿಸಲ್ಪಟ್ಟಿದೆ ಎಂದು ಭಾವಿಸೋಣ) ಸಕ್ರಿಯವಾಗಿಲ್ಲದಿದ್ದರೆ ಮಾತ್ರ ಎಂದು ಊಹಿಸೋಣ.

            .sidebar {
  display: block;
  width: 250px;

  /* Hide sidebar on small screens AND not in preference mode */
  @when (max-width: 767px) and not (.no-sidebar-on-mobile) {
    display: none;
  }

  /* Show sidebar on larger screens OR if preference mode is active on small screens */
  @when (min-width: 768px) or (.sidebar-on-mobile) {
    display: block;
  }
}

            

              
                Copy
              
            
          

ಈ ಮಟ್ಟದ ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲಿಂಗ್ ನಿರ್ದಿಷ್ಟ ಸಂದರ್ಭಗಳು ಮತ್ತು ಬಳಕೆದಾರರ ಸಂವಹನಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ UI ನಡವಳಿಕೆಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

@when ಗಾಗಿ ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ನೇರವಾಗಿರುತ್ತದೆ:

            selector {
  property: value;
  @when (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

ಬಹು ಷರತ್ತುಗಳನ್ನು ಸಂಯೋಜಿಸುವಾಗ, ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೀಗಾಗುತ್ತದೆ:

            selector {
  property: value;
  @when (condition1) and (condition2) {
    property: value;
  }
  @when (condition1) or (condition2) {
    property: value;
  }
  @when not (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

ಪ್ರಮುಖ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು:

• ಓದುವಿಕೆಗೆ ಆದ್ಯತೆ ನೀಡಿ: @when ಶೈಲಿಗಳನ್ನು ಹೆಚ್ಚು ಸಂಕ್ಷಿಪ್ತಗೊಳಿಸಬಹುದಾದರೂ, ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟಕರವಾಗಬಹುದಾದ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ನೆಸ್ಟೆಡ್ ಷರತ್ತುಗಳನ್ನು ತಪ್ಪಿಸಿ. ಅಗತ್ಯವಿದ್ದರೆ ಸಂಕೀರ್ಣ ತರ್ಕವನ್ನು ಪ್ರತ್ಯೇಕ ನಿಯಮಗಳಾಗಿ ವಿಭಜಿಸಿ.
• ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆ: ನಿಮ್ಮ @when ನಿಯಮಗಳಿಂದ ಗುರಿಪಡಿಸಿದ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳು ಅಥವಾ ಪರಿಸರಗಳಿಗೆ ಯಾವಾಗಲೂ ಒಂದು ಉತ್ತಮ ಫಾಲ್‌ಬ್ಯಾಕ್ ಒದಗಿಸಿ, ವಿಶೇಷವಾಗಿ @supports ಜೊತೆಗೆ ಬಳಸಿದಾಗ.
• ಕಾರ್ಯಕ್ಷಮತೆ: @when ಸ್ವತಃ ಸಾಮಾನ್ಯವಾಗಿ ಸಮರ್ಥವಾಗಿದ್ದರೂ, ಪಾರ್ಸಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದಾದ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಷರತ್ತುಬದ್ಧ ತರ್ಕದ ಬಗ್ಗೆ ಗಮನವಿರಲಿ, ಆದರೂ ಇದು ವಿಶಿಷ್ಟ ಬಳಕೆಯೊಂದಿಗೆ ವಿರಳವಾಗಿ ಸಮಸ್ಯೆಯಾಗುತ್ತದೆ.
• ಬ್ರೌಸರ್ ಬೆಂಬಲ: @when ಮತ್ತು ಅದರ ಸಹವರ್ತಿ at-rules ಗಾಗಿ ಬ್ರೌಸರ್ ಬೆಂಬಲದ ಮೇಲೆ ಕಣ್ಣಿಡಿ. ಇದರ ಪರಿಚಯದಂತೆ, ಅಳವಡಿಕೆ ಬೆಳೆಯುತ್ತಿದೆ, ಆದರೆ ನಿಮ್ಮ ಗುರಿ ಬ್ರೌಸರ್‌ಗಳಾದ್ಯಂತ ಪರೀಕ್ಷಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಇತ್ತೀಚಿನ ಹೊಂದಾಣಿಕೆಯ ಮಾಹಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಲು Can I Use ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ.
• ಜಾಗತಿಕ ವ್ಯಾಪ್ತಿ: ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವಿನ್ಯಾಸ ಮಾಡುವಾಗ, ವಿಶ್ವಾದ್ಯಂತ ಪ್ರಚಲಿತದಲ್ಲಿರುವ ಸಾಧನದ ಗಾತ್ರಗಳು ಮತ್ತು ರೆಸಲ್ಯೂಶನ್‌ಗಳ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯನ್ನು ಪೂರೈಸಲು @when ಅನ್ನು @media ಜೊತೆಗೆ ಬಳಸಿಕೊಳ್ಳಿ. ವಿಭಿನ್ನ ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ಸಹ ಪರಿಗಣಿಸಿ; ಅನಿಮೇಷನ್‌ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಆಯ್ಕೆ ಮಾಡಿದ ಬಳಕೆದಾರರಿಗಾಗಿ ನೀವು prefers-reduced-motion ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳನ್ನು @when ಒಳಗೆ ಬಳಸಬಹುದು.
• ನಿರ್ವಹಣೆ: ಸಂಬಂಧಿತ ಶೈಲಿಗಳನ್ನು ಒಟ್ಟಿಗೆ ಇರಿಸಲು @when ಬಳಸಿ. ಒಂದು ಪ್ರಾಪರ್ಟಿಯ ಮೌಲ್ಯವು ಒಂದು ಷರತ್ತಿನ ಆಧಾರದ ಮೇಲೆ ಬದಲಾದರೆ, ಡೀಫಾಲ್ಟ್ ಮತ್ತು ಷರತ್ತುಬದ್ಧ ಮೌಲ್ಯಗಳನ್ನು ಒಂದೇ ನಿಯಮ ಬ್ಲಾಕ್‌ನಲ್ಲಿ ಹೊಂದಿರುವುದು ಹೆಚ್ಚು ನಿರ್ವಹಣಾ ಯೋಗ್ಯವಾಗಿರುತ್ತದೆ, ಅವುಗಳನ್ನು ವಿವಿಧ @media ಪ್ರಶ್ನೆಗಳಲ್ಲಿ ಹರಡುವುದಕ್ಕಿಂತ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಭವಿಷ್ಯದ ದೃಷ್ಟಿಕೋನ

@when at-rule CSS ಜಗತ್ತಿಗೆ ತುಲನಾತ್ಮಕವಾಗಿ ಹೊಸ ಸೇರ್ಪಡೆಯಾಗಿದೆ. ಅದರ ಆರಂಭಿಕ ವ್ಯಾಪಕ ಅಳವಡಿಕೆಯಂತೆ, ಇದು Chrome, Firefox, Safari, ಮತ್ತು Edge ನಂತಹ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ನಿರ್ದಿಷ್ಟ ಆವೃತ್ತಿಗಳು ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳಿಗಾಗಿ ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಡೇಟಾವನ್ನು ಯಾವಾಗಲೂ ಪರಿಶೀಲಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

W3C CSS ವರ್ಕಿಂಗ್ ಗ್ರೂಪ್ CSS ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಪರಿಷ್ಕರಿಸಲು ಮತ್ತು ವಿಸ್ತರಿಸಲು ಮುಂದುವರೆಸಿದೆ. @when ನಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳು, ಇತರ ಷರತ್ತುಬದ್ಧ ನಿಯಮಗಳು ಮತ್ತು ನೆಸ್ಟಿಂಗ್ ಜೊತೆಗೆ, CSS ನಲ್ಲಿ ಹೆಚ್ಚು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಮತ್ತು ಅಭಿವ್ಯಕ್ತ ಸ್ಟೈಲಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳತ್ತ ಸಾಗುತ್ತಿರುವ ಸಂಕೇತವಾಗಿದೆ. ಈ ಪ್ರವೃತ್ತಿಯು ವೈವಿಧ್ಯಮಯ ಜಾಗತಿಕ ಬಳಕೆದಾರರ ನೆಲೆಯನ್ನು ಪೂರೈಸುವ ಸಂಕೀರ್ಣ, ಹೊಂದಿಕೊಳ್ಳಬಲ್ಲ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅತ್ಯಗತ್ಯವಾಗಿದೆ.

ವೆಬ್ ವಿನ್ಯಾಸವು ಹೊಂದಾಣಿಕೆ ಮತ್ತು ವೈಯಕ್ತೀಕರಣವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದನ್ನು ಮುಂದುವರೆಸಿದಂತೆ, ಡೆವಲಪರ್‌ನ ಶಸ್ತ್ರಾಗಾರದಲ್ಲಿ @when ಒಂದು ಅನಿವಾರ್ಯ ಸಾಧನವಾಗಲಿದೆ. ಸಾಧನದ ಗುಣಲಕ್ಷಣಗಳಿಂದ ಬ್ರೌಸರ್ ಸಾಮರ್ಥ್ಯಗಳವರೆಗೆ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಷರತ್ತುಗಳ ಆಧಾರದ ಮೇಲೆ ಶೈಲಿಗಳನ್ನು ಉತ್ತಮಗೊಳಿಸುವ ಅದರ ಸಾಮರ್ಥ್ಯವು ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ಸಂದರ್ಭ-ಅರಿವಿನ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ರಚಿಸಲು ನಮಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತದೆ.

ತೀರ್ಮಾನ

CSS @when ಒಂದು ಶಕ್ತಿಯುತ ಮತ್ತು ಸೊಗಸಾದ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಇದು ಷರತ್ತುಬದ್ಧ ಶೈಲಿಗಳನ್ನು ಬರೆಯುವ ನಮ್ಮ ಸಾಮರ್ಥ್ಯವನ್ನು ಗಣನೀಯವಾಗಿ ಹೆಚ್ಚಿಸುತ್ತದೆ. @media ಮತ್ತು @supports ಜೊತೆಗಿನ ಅದರ ಸಮನ್ವಯವನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ಹೆಚ್ಚು ರೆಸ್ಪಾನ್ಸಿವ್, ಅಡಾಪ್ಟಿವ್, ಮತ್ತು ದೃಢವಾದ ವೆಬ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಬಹುದು. ನೀವು ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳಿಗಾಗಿ ಟೈಪೋಗ್ರಫಿಯನ್ನು ಸರಿಹೊಂದಿಸುತ್ತಿರಲಿ, ಸುಧಾರಿತ CSS ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಅನ್ವಯಿಸುತ್ತಿರಲಿ, ಅಥವಾ ಸಂಕೀರ್ಣ ಸಂವಾದಾತ್ಮಕ UI ಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತಿರಲಿ, @when ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಬೇಡಿಕೆಗಳನ್ನು ಪೂರೈಸಲು ಅಗತ್ಯವಾದ ನಿಖರತೆ ಮತ್ತು ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ನಿಸ್ಸಂದೇಹವಾಗಿ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ಬಳಕೆದಾರ-ಕೇಂದ್ರಿತ ಡಿಜಿಟಲ್ ಅನುಭವಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಬುದ್ಧಿವಂತ, ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳಬಲ್ಲ, ಮತ್ತು ಭವಿಷ್ಯ-ನಿರೋಧಕ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಇಂದೇ ನಿಮ್ಮ ಯೋಜನೆಗಳಲ್ಲಿ @when ಜೊತೆ ಪ್ರಯೋಗವನ್ನು ಪ್ರಾರಂಭಿಸಿ.